<template>
  <div class="page">
     <m-header></m-header>
    <tab></tab>
    <ul class="rank_wrapper">
      <li class="rank_list" v-for="(item,index) in arr" :key="index">
        <div class="rank_cover">
          <img :src="imgUrl" alt="封面">
        </div>
        <ul class="sing_list">
          <li class="sing_item">
            <span>1</span>
            <span>青花瓷</span>
          </li>
          <li class="sing_item">
            <span>2</span>
            <span>繁花</span>
          </li>
          <li class="sing_item">
            <span>3</span>
            <span>九张机</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header'
import tab from 'components/tab/tab'
export default {
  data () {
    return {
      arr: [1, 2, 3],
      imgUrl: 'http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_1542939013_4_300_220665084.jpg'
    }
  },
  components: {
    MHeader,
    tab
  }
}
</script>
<style scoped  lang='less'>
  .rank_wrapper {
    display: flex;
    flex-direction: column;
    .rank_list {
      display: flex;
      flex-direction: row;
      margin:0 20px;
      padding-top: 20px;
      height: 100px;
      .rank_cover{
        width: 100px;
        height: 100px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .sing_list{
        display: flex;
        flex-direction: column;
        height: 100px;
        padding: 0 20px;
        background: #333;
        color:rgba(255,255,255,.3);
        font-size: 12px;
        justify-content: center;
        flex: 1;
        .sing_item{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          line-height: 26px;
        }
      }
    }
  }
</style>
